<template>
  <h1>El-容器组件</h1>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color:#0aa1ed;color:#fff;font-weight:bold;font-size: 40px;line-height:60px;">
        智慧车辆管理系统-IVOS
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu>
            <el-menu-item index="user" >用户管理</el-menu-item>
            <el-menu-item index="vehicle" >车辆管理</el-menu-item>
            <el-menu-item index="geofence" >围栏管理</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-table :data="vehicleArr">
            <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
            <el-table-column label="品牌" prop="brand" align="center"></el-table-column>
            <el-table-column label="车型" prop="model" align="center"></el-table-column>
            <el-table-column label="车牌号" prop="license" align="center"></el-table-column>
            <el-table-column label="颜色" prop="color" align="center"></el-table-column>
            <el-table-column label="公里数" prop="km" align="center"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script setup>
import {ref} from "vue";

const vehicleArr=ref([
  {brand:'奥迪',model:'A8L',license:'京A88888',color:'黑色',km:'120000'},
  {brand:'奥迪',model:'A8L',license:'京A88888',color:'黑色',km:'120000'},
  {brand:'奥迪',model:'A8L',license:'京A88888',color:'黑色',km:'120000'},
  {brand:'奥迪',model:'A8L',license:'京A88888',color:'黑色',km:'120000'},
  {brand:'奥迪',model:'A8L',license:'京A88888',color:'黑色',km:'120000'},
  {brand:'奥迪',model:'A8L',license:'京A88888',color:'黑色',km:'120000'}
]);
</script>



<style scoped>

</style>